<script setup>
import {computed} from "vue";

defineProps({
  data: Object
})
const formattedHour = computed(() => {
  return (timeString) => {
    const date = new Date(timeString);
    return date.getHours();
  };
});

</script>

<template>
  <div>
    <div style="display: flex;margin: 10px 20px; justify-content: space-between" v-loading="!data" element-loading-text="正在加载天气信息">
      <div style="font-size: 45px">
        <i :class="`qi-${data.now.icon}-fill`"></i>
      </div>
      <div style="font-weight: bold;text-align: center">
        <div style="font-size: 28px">{{data.now.temp}}&deg;C</div>
        <div style="font-size: 14px;">{{data.now.text}}</div>
      </div>
       <div style="margin-top: 13px">
         <div>{{data.location.country}} {{data.location.adm1}}</div>
         <div>{{data.location.adm2}} {{data.location.name}}</div>
       </div>
    </div>
    <el-divider style="margin-top: 10px ">
    </el-divider>
    <div>
      <div style="display: grid;grid-template-columns: repeat(5,1fr);text-align: center">
          <div v-for="item in data.hourly">
            <div style="font-size: 14px">{{ formattedHour(item.fxTime) }}时</div>
            <div style="font-size: 20px">
              <i :class="`qi-${item.icon}-fill`"></i>
            </div >
            <div style="font-size: 14px">{{item.temp}}&deg;C</div>
          </div>
      </div>

    </div>

  </div>
</template>

<style scoped>

</style>